{% extends 'base.html' %}
{% load static %}

{% block content %}

<style type="text/css">
	.image-container{
		max-width: 250px;
		height: auto;
	}
	.field-heading{
		color: var(--secondary-text-color);
	}
	.icon-container:hover {
		opacity: 0.3;
		cursor: pointer;
	}
	.friends-icon{
		color: #4287f5;
		font-size: 40px;
	}
	.person-add-icon{
		color: #4287f5;
		font-size: 40px;
	}
	.friend-text{
		font-weight: 500;
		color: black;
	}
	.friends-btn{
		background-color: #cccccc;
		border-color: #cccccc;
		color: #000;
		font-weight: 500;
	}
	.friends-btn:hover {
		background-color: #bfbfbf;
		border-color: #bfbfbf;
	}
	.dropdown-toggle::after { 
		content: none; 
	}
	.card{
		border-radius: 12px;
	}
	.material-icons{
		font-size: 30px;
	}
	.material-icons:hover{
		cursor: pointer;
	}
	.confirm-friend-request{
		color: green;
	}
	.confirm-friend-request:hover {
		opacity: 0.3;
	}
	.decline-friend-request:hover {
		opacity: 0.3;
	}
	.decline-friend-request{
		color: red;
	}
	.message-btn-text{
		font-weight: 500;
	}
</style>

<div class="container-fluid">
	<div class="d-flex flex-row justify-content-center flex-wrap align-items-start">

		<div class="card profile-card m-2">
		  <div class="card-body">
		  	<div class="d-flex flex-column justify-content-center p-4">
		  		<div class="image-container mx-auto mb-4">
		  			<img class="d-block border border-dark rounded-circle img-fluid mx-auto profile-image" alt="logo" id="id_profile_image" src="{{profile_image}}">
		  		</div>
		  		<p class="mt-4 mb-1 field-heading">Email</p>
		  		{%  if is_self %}
		  			<h5>{{email}}</h5>
		  		{% else %}
		  			{% if hide_email %}
			  			<h5>**********</h5>
			  		{% else %}
			  			<h5>{{email}}</h5>
			  		{% endif %}
			  	{% endif %}
		  		<p class="mt-4 mb-1 field-heading">Username</p>
		  		<h5>{{username}}</h5>

		  		<!-- If Auth user is viewing their own profile -->
		  		{% if is_self %}
		  		<a  class="mt-4 btn btn-primary" href="{% url 'account:edit' user_id=id %}">Update</a>
				<div class="d-flex flex-column mt-4">
					<a class="m-auto" href="{% url 'password_change' %}">Change password</a>
				</div>
		  		{% endif %}
		  	</div>
		  </div>
		</div>

		{% if request.user.is_authenticated %}
		<div class="d-flex flex-column mb-4">

			<!-- THEM to YOU -->
			{% if request_sent == 0 %}
			<div class="card m-2 p-4">
				<div class="d-flex flex-row align-items-center">
					<span class="friend-text align-items-center mr-2">Accept Friend Request</span>
					<span id="id_cancel_{{id}}" class="decline-friend-request material-icons p-1" onclick='triggerDeclineFriendRequest("{{pending_friend_request_id}}")'>cancel</span>
  					<span id="id_confirm_{{id}}" class="confirm-friend-request material-icons p-1" onclick='triggerAcceptFriendRequest("{{pending_friend_request_id}}")'>check</span>
				</div>
			</div>
			{% endif %}

			<div class="card m-2 px-4 pb-4">
				<!-- Cancel Friend Request / Send Friend Request / Remove Friend -->
				{% if is_friend == False and is_self == False %}
						<!-- You sent them a request -->
						{% if request_sent == 1 %}
						<div class="d-flex flex-column align-items-center pt-4">
							<button class="btn btn-danger" id="id_cancel_friend_request_btn">
								Cancel Friend Request
							</button>
						</div>
						{% endif %}
						<!-- No requests have been sent -->
						{% if request_sent == -1 %}
						<div class="d-flex flex-column align-items-center pt-4">
							<button class="btn btn-primary" id="id_send_friend_request_btn">
								Send Friend Request
							</button>
						</div>
						{% endif %}
				{% endif %}
					
					
				{% if is_friend %}
					<div class="dropdown pt-4 m-auto">
						<button class="btn btn-secondary dropdown-toggle friends-btn" type="button" id="id_friends_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Friends
						</button>
						<div class="dropdown-menu" aria-labelledby="id_friends_toggle">
							<a class="dropdown-item" href="#" onclick="removeFriend('{{id}}', onFriendRemoved)">Unfriend</a>
						</div>
					</div>
				{% endif %}
				
				<!-- Friend list link -->
		  		<div class="d-flex flex-column pt-4">
					<a href="{% url 'friend:list' user_id=id%}">
						<div class="d-flex flex-row align-items-center justify-content-center icon-container">
							<span class="material-icons mr-2 friends-icon">contact_page</span><span class="friend-text">Friends ({{friends|length}})</span>
						</div>
					</a>
				</div>

			</div>

			{% if friend_requests %}
			<div class="card m-2 px-4 pb-4">
				<!-- Friend requests -->
		  		<div class="d-flex flex-column pt-4">
					<a href="{% url 'friend:friend-requests' user_id=id%}">
						<div class="d-flex flex-row align-items-center justify-content-center icon-container">
							<span class="material-icons mr-2 person-add-icon">person_add</span><span class="friend-text">Friend Requests ({{friend_requests|length}})</span>
						</div>
					</a>
				</div>
			</div>
			{% endif %}

			{#% if is_friend %#}
				<div class="d-flex flex-row align-items-center btn btn-primary m-2 px-4" onclick="createOrReturnPrivateChat('{{id}}')">
					<span class="material-icons m-auto">
					message
					</span>
					<span class="message-btn-text m-auto pl-2">Message</span>
				</div>
			{#% endif %#}

		</div>
		{% endif %}

		
	</div>
</div>


<script type="text/javascript">

	// called from base_js.html
	//preloadImage("{{profile_image|safe}}", 'id_profile_image')

	function onFriendRequestSent(){
		location.reload();
	}

	function onFriendRequestCancelled(){
		location.reload();
	}

	function onFriendRemoved(){
		location.reload();
	}

	function onFriendRequestAccepted(){
		location.reload();
	}

	function onFriendRequestDeclined(){
		location.reload();
	}


	var sendFriendRequestBtn = document.getElementById("id_send_friend_request_btn")
	if (sendFriendRequestBtn != null){
		sendFriendRequestBtn.addEventListener("click", function(){
			sendFriendRequest("{{id}}", onFriendRequestSent)
		})
	}

	var cancelFriendRequestBtn = document.getElementById("id_cancel_friend_request_btn")
	if(cancelFriendRequestBtn != null){
		cancelFriendRequestBtn.addEventListener("click", function(){
			cancelFriendRequest("{{id}}", onFriendRequestCancelled)
		})
	}

	var removeFriendBtn = document.getElementById("id_unfriend_btn")
	if (removeFriendBtn != null){
		removeFriendBtn.addEventListener("click", function(){
			removeFriend("{{id}}", onFriendRemoved)
		})
	}

	function triggerAcceptFriendRequest(friend_request_id){
		acceptFriendRequest(friend_request_id, onFriendRequestAccepted)
	}

	function triggerDeclineFriendRequest(friend_request_id){
		declineFriendRequest(friend_request_id, onFriendRequestDeclined)
	}
	
</script>

{% include 'friend/snippets/send_friend_request.html' %}
{% include 'friend/snippets/accept_friend_request.html' %}
{% include 'friend/snippets/remove_friend.html' %}
{% include 'friend/snippets/decline_friend_request.html' %}
{% include 'friend/snippets/cancel_friend_request.html' %}
{% include 'snippets/create_or_return_private_chat.html' %}
{% endblock content %}